<template>
  <div class="help_page">
    <div class="banner">
      <img src="@/assets/help/banner.png" alt="" class="img">
    </div>
    <div class="contact_us">
      <div class="title contact_us_title">联系我们</div>
      <div class="list">
        <div class="list_c">
          <div class="item">
            <div class="item_c">
              <img src="@/assets/help/address.png" alt="" class="img">
              <div class="name">公司地址</div>
              <div class="sub_name">深圳市南山区粤海街道科兴科学园A座
                518000</div>
            </div>
          </div>
          <div class="item">
            <div class="item_c">
              <img src="@/assets/help/mobilephone.png" alt="" class="img">
              <div class="name">手机号码</div>
              <div class="sub_name">13300000000 / 18088888888
                工作日：8:00 - 20:00
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item_c">
              <img src="@/assets/help/phone.png" alt="" class="img">
              <div class="name">联系电话</div>
              <div class="sub_name">
                400-888-8888
                全国加盟热线 7x24小时服务
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="problem">
      <div class="title problem_title">常见问题</div>
      <div class="list">
        <div class="list_c">
          <div class="item">
            <div class="item_c">
              <div class="title_box bg_1">平台认证所需资料</div>
              <div class="text_list">
                <div class="text">1、营业执照（统一社会信用代码证）</div>
                <div class="text">2、开户许可证或银行账户证明</div>
                <div class="text">3、企业银行账号及开户行地址</div>
                <div class="text">4、企业法人代表身份证</div>
                <div class="text">5、企业管理员身份证</div>
                <div class="text">6、企业法人代表授权委托书</div>
                <div class="text">7、电子签名认证证书授权委托书</div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item_c">
              <div class="title_box bg_2">企业融资所需资料</div>
              <div class="text_list">
                <div class="text">1、企业近一年内财务数据及财务报表</div>
                <div class="text">2、真实贸易合同/协议资料PDF格式文件</div>
                <div class="text">3、真实贸易发票PDF或图片格式文件</div>
                <div class="text">4、其他真实贸易履约资料PDF格式文件</div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item_c">
              <div class="title_box bg_3">平台资料文件下载</div>
              <div class="text_list">
                <div class="text">
                  1、电子签名认证证书授权委托书
                  <a
                    class="download_btn"
                    :href="baseURL + templateObj2.fileUrl"
                    target="_blank"
                  >
                    <i class="el-icon-document-copy icon"></i>
                    下载
                  </a>
                </div>
                <div class="text">
                  2、企业法人代表授权委托书
                  <a
                    class="download_btn"
                    :href="baseURL + templateObj1.fileUrl"
                    target="_blank"
                  >
                    <i class="el-icon-document-copy icon"></i>
                    下载
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Copyright style="background-color: #fff;color:#999;" />
  </div>
</template>

<script>
import Copyright from '@/customComponents/copyright';
import { downloadTemplate } from "@/api/authenticate";

export default {
  components: {
    Copyright,
  },
  data() {
    return {
      baseURL: process.env.NODE_ENV === 'development' ? process.env.VUE_APP_BASE_API :
        process.env.VUE_APP_HTTP_REQUEST_ADDRESS,
      templateObj1: {},
      templateObj2: {},
    }
  },
  mounted() {
    this.downloadTemplate(2).then((res) => {
      this.templateObj2 = res.data;
    }); // 电子签名认证证书授权委托书
    this.downloadTemplate(1).then((res) => {
      this.templateObj1 = res.data;
    }); // 法人授权委托书
  },
  methods: {
    // 下载模板
    downloadTemplate(id) {
      return new Promise((resolve, reject) => {
        downloadTemplate(id).then((res) => {
          resolve(res);
        });
      });
    },
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/px2rem.scss';
@import '@/assets/styles/variables.scss';

.help_page {
  .banner {
    .img {
      display: block;
      width: 100%;
      height: auto;
    }
  }
  .title {
    color: #333;
    font-size: px2rem(56);
    font-weight: 600;
    text-align: center;
  }
  .contact_us {
    padding-bottom: px2rem(142);
    background-color: #F6FAFF;
    .contact_us_title {
      padding: px2rem(80) 0 px2rem(125);
    }
    .list {
      width: px2rem(1400);
      margin: 0 auto;
      .list_c {
        margin-left: px2rem(-20);
        margin-right: px2rem(-20);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .item {
          padding: px2rem(20);
          .item_c {
            width: px2rem(440);
            height: px2rem(417);
            background: linear-gradient( 180deg, rgba(211,232,255,0.61) 0%, #FEFEFE 100%);
            border-radius: px2rem(20);
            box-shadow: 0 px2rem(10) px2rem(24) 0 rgba(0, 88, 255, 0.12);
            padding: px2rem(193) px2rem(48) 0;
            box-sizing: border-box;
            position: relative;
            .img {
              width: px2rem(200);
              height: px2rem(200);
              position: absolute;
              top: px2rem(-56);
              left: 50%;
              z-index: 2;
              transform: translateX(-50%);
            }
            .name {
              color: #333;
              font-size: px2rem(36);
              font-weight: 600;
              text-align: center;
              margin-bottom: px2rem(20);
            }
            .sub_name {
              color: #777;
              font-size: px2rem(20);
              text-align: center;
              word-break: break-all;
            }
          }
        }
      }
    }
  }
  .problem {
    background-color: #fff;
    padding-bottom: px2rem(142);
    .problem_title {
      padding: px2rem(80) 0 px2rem(90);
    }
    .list {
      width: px2rem(1400);
      margin: 0 auto;
      .list_c {
        margin: 0 px2rem(-20);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .item {
          padding: px2rem(20);
          .item_c {
            width: px2rem(440);
            height: px2rem(480);
            background: linear-gradient( 180deg, #FFFFFF 0%, #FFFFFF 100%);
            box-shadow: px2rem(0) px2rem(2) px2rem(16) px2rem(0) rgba(7,71,191,0.24);
            border-radius: px2rem(28);
            .title_box {
              color: #fff;
              font-size: px2rem(28);
              font-weight: 500;
              height: px2rem(190);
              line-height: px2rem(190);
              text-align: center;
              &.bg_1 {
                background: url('../../assets/help/problem_bg_1.png') no-repeat 0 0;
                background-size: 100% 100%;
              }
              &.bg_2 {
                background: url('../../assets/help/problem_bg_2.png') no-repeat 0 0;
                background-size: 100% 100%;
              }
              &.bg_3 {
                background: url('../../assets/help/problem_bg_3.png') no-repeat 0 0;
                background-size: 100% 100%;
              }
            }
            .text_list {
              padding: px2rem(40) px2rem(60);
              .text {
                color: #555;
                font-size: px2rem(14);
                line-height: px2rem(30);
                display: flex;
                justify-content: space-between;
                align-items: center;
                .download_btn {
                  color: $theme;
                  .icon {
                    margin-right: px2rem(4);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
